<script lang="ts" setup>
import { h, reactive } from 'vue'

interface Student {
  id: number
  name: string
  age: number
  sex: string
  address: string
}
const tableData = reactive<Student[]>([
  {
    id: 1,
    name: '王五',
    age: 20,
    sex: '男',
    address: '北京市'
  },
  {
    id: 2,
    name: '张三',
    age: 18,
    sex: '',
    address: '开鲁县'
  },
  {
    id: 3,
    name: '李四',
    age: 19,
    sex: '男',
    address: '通辽市'
  }
])
const tableConfig = reactive<TableConfig<Student>>({
  columns: [
    {
      label: '序号',
      type: 'index',
      fixed: 'left'
    },
    {
      type: 'default',
      label: '姓名',
      prop: 'name',
      minWidth: 500,
      align: 'center',
      headerAlign: 'center',
      headerCell: props => {
        return h('span', { style: { color: 'red' } }, `${props.column.label}123`)
      }
    },
    {
      type: 'default',
      label: '年龄',
      prop: 'age'
    },
    { type: 'default', label: '性别', prop: 'sex', width: 200 },
    { type: 'default', label: '地址', prop: 'address', width: 200 }
  ],
  highlightCurrentRow: true,
  border: true,
  stripe: true
})
</script>
<template>
  <XyTable ref="tableRef" :tableConfig="tableConfig" :tableData="tableData" />
</template>
